(function() {
	//初始化canvas
	var canvas = document.getElementById("myDemo");
	var width = window.innerWidth;
	var height = $(canvas).attr("height");
	$(canvas).attr("width", width);
	//设置执行速度
	var m = 500;
   //需要排序的数组
   var res  = [];
   //初始化画笔;
   var ctx = initHb("#66AFE9");
   //动画定时器
   var timer;
   
   //初始化排序界面
   $("#init").on("click",()=>{
     	clearInterval(timer);  //暂停动画
   	    res = initMathData();
   	    clearCanvas(ctx, width, height);
		initView(res, ctx, width, height);
   });

	//冒泡排序
	$("#mp").on("click", function() {
		/*clearCanvas(initHb("#66AFE9"), width, height);*/
		drawSortProcess(initMppx(res),width,height,m);
		/*initMppx(res, m, width, height);*/
	})
	
	//插入排序
	$("#cr").on("click",()=>{
		/*initCrpx(res);*/
		drawSortProcess(initCrpx(res),width,height,m);
	});
	
	//选择排序
	$("#xz").on("click",()=>{
		/*initXzpz(res);*/
		drawSortProcess(initXzpz(res),width,height,m);
	})
	
	//绘制排序过程
function drawSortProcess(pxgc, width, height,m){
	var leng = pxgc[0].length;
	var i = 0;            
	var w = width / (leng + 1);  //小长方体宽度
	var ctx = initHb("#66AFE9"); //初始化画笔
	timer = setInterval(function(){
		if(i>=pxgc.length){
			clearInterval(timer);  //暂停动画
		}else{
		clearCanvas(ctx, width, height); //清空画板
		for(let j = 0; j < pxgc[i].length; j++) {
			var ndt = pxgc[i][j]+"";
			var str = ndt.substring(ndt.length-1);
			var value = 0;
			if(str == "r") {
				ctx.fillStyle = "red";
				value = ndt.substring(0,ndt.length-1);
			}else if(str == "g"){
				ctx.fillStyle = "green";
				value = ndt.substring(0,ndt.length-1);
			} else if(str == "l"){
				ctx.fillStyle = "lightgray";
				value = ndt.substring(0,ndt.length-1);
			} else{
				ctx.fillStyle = "#66AFE9";
				value = ndt;
			}
			ctx.fillRect(w * j, height - value, w - 1, value);
		}
		i++;
		}
	},m)
}

})();

//初始化需要排序的数组
function initMathData() {
	var nums = [];
	for(let i = 0; i < 100; i++) {
		nums.push(Math.floor(Math.random() * 99 + 1));
	}
	return nums;
}

//初始化显示界面
function initView(res, ctx, width, height) {
	clearCanvas(ctx, width, height);
	var len = res.length;
	var w = width / (len + 1);
	for(let i = 0; i < len; i++) {
		ctx.fillRect(w * i, height - res[i], w - 1, res[i]);
	}
}

//清空画布
function clearCanvas(cxt, width, height) {
	cxt.clearRect(0, 0, width, height);
}

//初始化画笔
function initHb(color) {
	var canvas = document.getElementById("myDemo");
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = color;
	return ctx;
}

//冒泡排序算法
function initMppx(res){
	var czbz = []; //操作步骤
	for (let i = 0; i < res.length; i++) {
		for(let j = 0; j < res.length  - i; j++) {
			var bzres = res.slice(0,res.length);//每一步的数组
			var nowdata = res[j]; 
			   bzres[j] = nowdata+"g";
			if(res[j] > res[j + 1]) {
				res[j] = res[j + 1];
				res[j + 1] = nowdata;
				bzres[j+1] = res[j]+"r";
		   }
			czbz.push(bzres);
		}
	}
	return czbz;
}

//插入排序
function initCrpx(res){
	var czbz = []; //操作步骤
	for(let i = 0; i < res.length; i++){
		for (let j = i+1; j >=1 ; j--) {
			var bzres = res.slice(0,res.length);
			var nowdata = res[i+1];
			var isbreak = false;
			bzres[i+1] = nowdata + "g";
			if (res[j-1] <= nowdata && nowdata < res[j]) {
				res.splice(j,0,nowdata);
				res.splice(i+2,1);
				bzres[j-1] = res[j-1]+"r";
				isbreak = true;
			}else if(j-1 == 0 && nowdata <= res[0]){
				res.unshift(nowdata);
				res.splice(i+2,1);
				bzres[j-1] = res[j-1]+"r";
				isbreak = true;
			}else if(nowdata >= res[i]){
				bzres[i] = res[i]+"r";
				isbreak = true;
			}else{
				bzres[j-1] = res[j-1]+"l";
			}
			czbz.push(bzres);
			if(isbreak){break;}
		}
	}
	return czbz;
}

//选择排序
function initXzpz(res){
		var czbz = []; //操作步骤
		var index = 0;     //最小值索引
		var mix = res[index];  //最小值
		for (let i = 0; i < res.length; i++) {
			var nowdata = res[i];
			mix = res[i];
			for (let j = i+1; j < res.length; j++) {
				var bzres = res.slice(0,res.length);
			    bzres[i] = nowdata + "g";
			    bzres[j] = res[j] +"l";
				if(res[j] < mix){
					mix = res[j];
					index = j;
					bzres[j] = res[j] + "r";
				}else{
					bzres[index] = res[index] + "r";
				}
				czbz.push(bzres);
			}
			res[i] = mix;
			res[index] = nowdata;
			var bzres = res.slice(0,res.length);
			czbz.push(bzres);
		}
		return czbz;
}


